<?php
include 'include/header.php';
?>
<div class="panel panel-default">
  <div class="panel-heading">Daftar Akun</div>
  <div class="panel-body">

		<div class="panel panel-default">
					<div class="panel-body">
						<div class="col-lg-4">
							
									<form action="<?php echo base_url().'index.php/akun/registrasi/true'?>" class="form-horizontal" method="post" data-parsley-validate>
											<div class="form-group">
												<label class="control-label col-lg-4">Username</label>
												<div class="col-lg-8">
													<input type="text" class="form-control" name="name" id="name" data-parsley-trigger="change" required>
													<span id = "username_status"></span>
												</div>
											</div>
											<div class="form-group">
												<label class="control-label col-lg-4">Email</label>
												<div class="col-lg-8">
													<input type="email" class="form-control" name="email" id="email" data-parsley-trigger="change" required>
												</div>
											</div>
											<div class="form-group">
												<label class="control-label col-lg-4">Password</label>
												<div class="col-lg-8">
													<input type="password" class="form-control" name="pass" id="pass" data-parsley-trigger="change" required>
												</div>
											</div>
											<div class="form-group">
												<label class="control-label col-lg-4">Ulangi Password</label>
												<div class="col-lg-8">
													<input type="password" class="form-control" name="pass2" id="pass2" data-parsley-trigger="change" required onkeyup="checkPass(); return false;">
													<span id="confirmMessage" class="confirmMessage"></span>
												</div>
											</div>
											<div class="form-group" >
												<label class="control-label col-lg-4"></label>
												<div class="col-lg-8">
													<button type="submit" class="btn btn-primary" onclick="post(event)">Tambah</button>
													<button type="submit" class="btn btn-warning" onclick="window.history.back()">Kembali</button>
												</div>
											</div>
									</form>
							
						</div>
					</div>
			</div>
		
	</div>
</div>


<?php
include 'include/footer.php';
?>
<script>
var base_url = "<?php echo base_url();?>"
$(document).ready(function() {
	$('#name').on('keypress', function(e) {
        if (e.which == 32)
            return false;
    });
	
	$('#name').keyup(function() {
		var username = $(this).val();
		$('#username_status').text('Checking database...');
		if(username != ''){
			$.post(base_url+'/index.php/akun/cek_username',{ username: username }, function(data) {
				if(data == ''){
					$('#username_status').text($('#name').val()+' dapat digunakan!');
				} else{
						$('#username_status').text(username+' sudah digunakan');
						$('#name').val('');
					}
			});
		} else {
			$('#username_status').text('');
		}

	});
});
	function checkPass()
    {
        var pass1 = document.getElementById('pass');
        var pass2 = document.getElementById('pass2');   
        var message = document.getElementById('confirmMessage');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";
        if(pass.value == pass2.value){
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Passwords Cocok!";
        }else{
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "Passwords Tidak Cocok!";
        }
    }  
	
	function post(e)
	{
		if($('#pass').val() != $('#pass2').val())
		{
			alert('Password tidak cocok!');
				e.preventDefault();
				return false;
		} else
			{
				
			}
	}

</script>